<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--360浏览器优先以webkit内核解析-->
	<title>西封主页</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header">
	<div class="col-sm-3">
		<h2>欢迎入职</h2>
		<small>西封上届员工成功入职合影：</small>
		<br>
		<br>
		<img th:src="@{/img/hezhao.jpg}" width="100%" style="max-width:264px;">
		<br>
	</div>
	<div class="col-sm-5">
		<h2>西封杂志社主页管理</h2>
		<p>关于西封：具体成立年代不详，始于一本名为《南风游记》的残本，后于民国时期由疏南风创立「西安画报」，在召集成员后于1987年改为「西封杂志社」。</p>
		<p>你的工作：作为刚入职西封杂志社的成员，你的任务是在西封旗下论坛頭七中，根据社长让你调查的帖子间的联系进行整合，必要时需要实地探索，揭开帖子后隐藏的秘密。</p>
		<br>
		<p>
			<a class="btn btn-success btn-outline" href="https://gitee.com/liang-aoyu-11/store/" target="_blank">
				<i class="fa fa-cloud"> </i> 访问码云
			</a>
			<a class="btn btn-white btn-bitbucket" target="_blank">
				<i class="fa fa-home"></i> 前往论坛
			</a>
		</p>
	</div>
	<div class="col-sm-4">
		<h5>大家都在看：</h5>
		<style>
			/* 悬停效果 */
            li:hover {
              background: rgba(112,147,219,0.1);
              transform: translateX(5px);
            }
		</style>
		<span style="color: #7093DB;">
            <ol>
                <li>#资产负债欠车不还</li>
                <li>#青城传媒发家史，竟有不为人知的血腥背景</li>
                <li>#整个世界只有蘑菇先生一位心理医生</li>
                <li>#如何有效杀死亲哥</li>
                <li>#生活枯燥无味，贱猫殴打人类</li>
                <li>#梦，你的名字是梦</li>
				<li>#刘箐橙给未成年退款</li>
                <li>更多……</li>
            </ol>
			</span>
	</div>

</div>
<div class="wrapper wrapper-content">
	<div class="row">
		<div class="col-sm-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>名人访谈录：</h5>
				</div>
				<div class="ibox-content">
					<p>刘箐橙：<span style="color: #7093DB;"><u>从洗碗工到万众瞩目的大明星（第二版）</u></span></p>
					<p>白岭：<span style="color: #7093DB;"><span style="text-decoration: underline">蒙尘的明珠（第二版）</span></span></p>
					<p>疏南风：<span style="color: #7093DB;"><span style="text-decoration: underline">请多多支持《南风游记》（第三版）</span></span></p>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>今日新贴</h5>
				</div>
				<div class="ibox-content no-padding">
					<div class="panel-body">
						<div class="panel-group" id="version">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h5 class="panel-title">
										<a data-toggle="collapse" data-parent="#version" href="#v480">2025.4.28</a>
										<span class="pull-right" style="color:#ff6b6b;margin-left:10px;">  <!-- 新增样式 -->
											<i class="glyphicon glyphicon-bullhorn"></i> 7篇新帖  <!-- 新增图标 -->
      										</span>
									</h5>
								</div>
								<style>
									/* 列表项增强样式 */
                                    #v480 li {
                                      margin: 15px 0;  /* 核心间距 */
                                      padding: 8px 15px;  /* 增加内边距 */
                                      background: rgba(112,147,219,0.05);  /* 浅蓝色背景 */
                                      border-radius: 4px;
                                      transition: all 0.3s;  /* 悬停动效 */
                                    }

                                    /* 悬停效果 */
                                    #v480 li:hover {
                                      background: rgba(112,147,219,0.1);
                                      transform: translateX(5px);
                                    }
								</style>
								<div id="v480" class="panel-collapse collapse in">
									<div class="panel-body">
										<ol>
											<li>【讨论】你们那边有什么奇怪的神吗？</li>
											<li>【探灵】错位的脸</li>
											<li>【故事】窗边的人（末稿）</li>
											<li>【 ■ ■ 】我的姐姐死了</li>
											<li>【故事】今天给你们讲个关于先祖的事</li>
											<li>【求助】我的肚子好胀</li>
											<li>【故事】墙里的人</li>
										</ol>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>我的任务</h5>
				</div>
				<div class="ibox-content">
					<div class="alert alert-warning">
						“我来到，我看见，我记录。”
					</div>
					<style>
						/* 列表项增强样式 */
                          h4{
                          margin: 15px 0;  /* 核心间距 */
                          padding: 8px 15px;  /* 增加内边距 */
                          background: rgba(112,147,219,0.05);  /* 浅蓝色背景 */
                          border-radius: 4px;
                          transition: all 0.3s;  /* 悬停动效 */
                        }
                        h4:hover {
                                      background: rgba(112,147,219,0.1);
                                      transform: translateX(5px);
                                    }
					</style>
					<p id="pay-qrcode">
					<h4>【求助】我的表姐好奇怪<span style="color:#ff6b6b"> [进行中]</span></h4>
					<h4><span style="color: #C0C0C0;">【求助】住在我隔壁的一家三口有点...[已完成]</span></h4>
					<h4><span style="color: #C0C0C0;">【故事】你们小时候看过街边马戏吗？[已完成]</span></h4>
					<h4><span style="color: #C0C0C0;">【求助】神龛里的妹妹[已完成]</span></h4>
					</p>

				</div>
			</div>
		</div>
	</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script type="text/javascript">
	$('#pay-qrcode').click(function(){
        var html=$(this).html();
        parent.layer.open({
            title: false,
            type: 1,
            closeBtn:false,
            shadeClose:true,
            area: ['600px', '360px'],
            content: html
        });
    });
</script>
</body>
</html>
